<template>
  <el-row>
    <el-col :span="20" :offset="2">


      <!-- Form -->
      <el-button type="text" @click="dialogFormVisible = true">新增图书</el-button>

      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">

        <el-form ref="bookForm" :model="bookForm" :rules="bookRules" label-width="80px" class="demo-ruleForm">

          <el-form-item label="图书名称" prop="bookName">
            <el-input v-model="bookForm.bookName"></el-input>
          </el-form-item>

          <el-form-item label="图书类型" prop="bookType">
            <el-select v-model="bookForm.bookType" placeholder="请选择图书类型">
              <el-option label="小说" value="小说"></el-option>
              <el-option label="名著" value="名著"></el-option>
              <el-option label="悲剧" value="悲剧"></el-option>
              <el-option label="动漫" value="动漫"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="图书价格" prop="bookPrice">
            <el-input v-model="bookForm.bookPrice"></el-input>
          </el-form-item>

          <el-form-item label="图书作者" prop="bookAuthor">
            <el-input v-model="bookForm.bookAuthor"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="submitForm('bookForm')">立即创建</el-button>
            <el-button @click="resetForm('bookForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>



      <el-form :inline="true" :model="keys" class="demo-form-inline">
        <el-form-item label="书名">
          <el-input v-model="keys.bookName" placeholder="请输入书名相关内容"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="keys.bookType" placeholder="类型">
            <el-option label="" value=""></el-option>
            <el-option label="小说" value="小说"></el-option>
            <el-option label="名著" value="名著"></el-option>
            <el-option label="悲剧" value="悲剧"></el-option>
            <el-option label="动漫" value="动漫"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="resetForm('')">重置</el-button>
        </el-form-item>
      </el-form>

      <div
        style="margin-bottom:20px;margin-top:40px;border: 1px solid #458b74;box-shadow: 5px 5px 3px 0px #CCCCCC;border-radius: 5px">
        <el-table :data="bookList" style="width: 100%;text-align:center">
          <el-table-column prop="bookName" label="书名" min-width="20%">
          </el-table-column>
          <el-table-column prop="bookPrice" label="价格" min-width="20%">
          </el-table-column>
          <el-table-column prop="bookAuthor" label="作者" min-width="20%">
          </el-table-column>
          <el-table-column prop="bookSales" label="销量" min-width="20%">
          </el-table-column>
          <el-table-column label="操作" min-width="20%">
            <template slot-scope="scope">
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteBook(scope.row.id)">
                <el-button slot="reference" type="danger" icon="el-icon-delete">
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination background @current-change="changeCurrentPage" layout="prev, pager, next"
          :total="page.total" :current-page.sync="page.currentPage" :page-size="page.pageSize">
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'Work1',
    data() {
      return {
        bookList: [],
        dialogFormVisible: false,
        keys: {
          bookType: '',
          bookName: ''
        },
        page: {
          pageSize: 4,
          currentPage: 1,
          total: 0,
          totalPages:0
        },
        bookForm: {
          bookName: '',
          bookType: '',
          bookPrice: '',
          bookAuthor: '',
          bookSales: ''
        },
        bookRules: {
          bookName: [{
            required: true,
            message: '请输入图书名称',
            trigger: 'blur'
          }],
          bookType: [{
            required: true,
            message: '请选择图书类型',
            trigger: 'change'
          }],
          bookPrice: [{
            required: true,
            message: '请输入图书价格',
            trigger: 'blur'
          }],
          bookAuthor: [{
            required: true,
            message: '请输入图书作者',
            trigger: 'blur'
          }],
        }

      }
    },
    methods: {
      getBookList() {
        let jsonObj = Object.assign(this.keys, this.page);
        let params = this.$qs.stringify(jsonObj);
        console.log(jsonObj);
        console.log(params);
        this.axios.post("/book/select", params)
          .then(res => {
            console.log(res);
            this.page.total = res.data.total;
            this.bookList = res.data.records;
            this.page.totalPages = res.data.pages;
            console.log(this.page.total);
            console.log(this.page.currentPage);
          })
      },
      changeCurrentPage() {
        this.getBookList();
      },
      deleteBook(id) {
        this.axios.post("/book/del?id=" + id)
          .then(res => {
            this.$alert(res.data);
            if (res.data == '删除成功！') {
              if (this.page.totalPages == this.page.currentPage && this.page.total%this.page.pageSize==1) {
                this.page.currentPage=this.page.currentPage - 1 ;
              }
              this.getBookList();
            }
          })
      },
      onSubmit() {
        this.getBookList()
      },
      onReset() {
        this.keys.bookType = '';
        this.keys.bookName = '';
        this.getBookList();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post("/book/add",this.bookForm)
            .then(res => {
              console.log(res);
              this.$alert(res.data);
              if (res.data == "添加成功！") {
                this.getBookList();
                this.dialogFormVisible = false;
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {
      this.getBookList();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
